<template>
  <div class="goods_new">
    <van-nav-bar title="短信验证" left-arrow @click-left="goback"/>
    <div style="background:#fff;padding: 0 10px;">
      <van-field v-model="smscode" label="短信验证码" placeholder="请输入短信验证码" />
    </div>
    <div class="buttonPos">
      <van-button  @click="submitSms" type="primary" size="large">支付</van-button>
    </div>
  </div>
</template>

<script>
import { orderPayByQuickConfirm, orderPayByQuickRepay } from '@/api/api';
import { Toast, Field, Picker, Popup } from 'vant';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      issmscode: false,
      sendAuthCode: true,
      smscode: '',
      timer: 0
    };
  },

  methods: {
     onConfirm(value) {
      this.accttype = value;
      this.showPicker = false;
    },
    submitSms() {
      if (!this.smscode) {
        Toast('请输入手机验证码')
        return false
      }
      const {orderId, thpinfo} = getLocalStorage('orderId', 'thpinfo');
      let dataret = {orderId: orderId, smscode: this.smscode}
      orderPayByQuickConfirm(dataret).then(res => {
        if(res.data.errno === 0) {
            if(res.data.data.resultCode === '0000') {
                Toast('支付成功');
                this.$router.push('/user/order/list/2')
            } else if(res.data.data.resultCode === '1999') {
                let dataRepay = {orderId: orderId, thpinfo: thpinfo}
                orderPayByQuickRepay(dataRepay).then(e => {
                    if(e.data.errno === 0) {
                        Toast('支付成功');
                        this.$router.push('/user/order/list/2')
                    } else {
                        Toast(e.data.data.errmsg); 
                        this.$router.push('/user/order/list/1')
                    }
                })
            }else{
               Toast(res.data.data.errmsg); 
            }
        }else{
          Toast(res.data.errmsg);
        }
      })
    },
    submitHandle() {
      if(this.accttype === '') {
        Toast('请选择卡类型');
        return false
      }
      if (this.accttype === '借记卡') {
          this.accttypeVal = '00'
      } else {
          this.accttypeVal = '02'
      }
      if(this.acctno === '') {
        Toast('请输入银行卡号');
        return false
      }
      if (!this.idno) {
          Toast('请输入身份证号')
          return false
        }
      if(this.acctname === '') {
        Toast('请输入姓名');
        return false
      }
      if (this.mobile === '' || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.mobile)) {
        Toast('请输入正确的电话');
        return false
      }
      if (!this.cvv2 && this.accttype === '信用卡') {
          Toast('请输入信用卡安全码')
          return false
        }
        if (!this.validdate && this.accttype === '信用卡') {
          Toast('请输入信用卡有效期')
          return false
        }
        let dataret = {accttype: this.accttypeVal, acctno: this.acctno, idno: this.idno, acctname: this.acctname, mobile: this.mobile, cvv2: this.cvv2, validdate: this.validdate}
      payByQuickAgreeapply(dataret).then(res => {
        if (res.data.data.resultCode === '1999') {
          if (res.data.data.thpinfo) {
            this.thpinfo = res.data.data.thpinfo
          }
          this.issmscode = true
        } else {
          Toast(res.data.data.resultMsg);
        }
      })
    },
    goback() {
      this.$router.go(-1);
    }
  },
  components: {
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Popup.name]: Popup,
    Toast
  }
};
</script>

<style lang="scss" scoped>
/deep/.van-cell {
  padding: 10px 0;
}
/deep/.van-cell:not(:last-child)::after {
  left: 0;
}
/deep/.van-uploader__preview-delete {
  display: none;
}
/deep/.van-dropdown-menu__item {
  justify-content: left;
}
/deep/.van-dropdown-menu__title {
  padding: 0;
}
/deep/.van-dropdown-menu__title::after {
  left: 20rem;
  right: 0;
}
/deep/.van-dropdown-item__option {
  padding: 10px;
}
.posR {
  position: relative;
}
.zishu {
  position: absolute;
  right: 10px;
  top: 0;
}
.tit {
  color: #999;
  margin-top: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}
.buttonPos {
  margin: 20px;

}
</style>